<!--
 * @description: 
 * @Date: 2022-10-05 15:59:02
 * @LastEditTime: 2022-11-02 13:16:32
-->
<template>
  <div class="flex justify-center pl-4 pr-4">
    <div class="search-box max-w-screen-sm ml-2 mr-2 mt-8 flex-shrink">
      <div class="focus-search max-w-screen-sm">
        <div class="layui-icon Searchengine hover select-none" id="Searchengine" @click="openSearchType">
          <img :src="defSearch.icon" class="pointer-events-none" />
          <svg class="pointer-events-none" width="24" height="24" viewBox="0 0 48 48" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M36 19L24 31L12 19H36Z" fill="none" stroke="#9CA3AF" stroke-width="4" stroke-linejoin="round" />
          </svg>
        </div>
        <input id="search" type="text" autocomplete="off" @input="getResult" v-model="searchText"
          class="placeholder-Gray-300 text-sm" placeholder="输入并搜索" @contextmenu.stop @focus="focus"
          @blur="closeRecommended" @keydown="swipe" @keypress="searchSatrt"
          :autofocus="store.state.config.openType.autofocus" />
        <i v-show="Recommended" @click="clear">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 14L34 34" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M14 34L34 14" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </i>
        <i class="hover" @click="search(searchText)">
          <svg width="22" height="22" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
              fill="none" :stroke="color" stroke-width="4" stroke-linejoin="round" />
            <path d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
              :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M33.2216 33.2217L41.7069 41.707" :stroke="color" stroke-width="4" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
        </i>
      </div>
      <div class="searchList max-w-screen-sm flex-shrink ">
        <div class="searchType space-x-3 " ref="searchTypeDom" v-animate="'flipInX'" v-if="openSearch">
          <div class="space-x-2 ">
            <div v-for="item in list" @click="swipeSearch(item)" class="hover flex-shrink">
              <img :src="item.icon" />
              <span class="text-sm mt-1">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="searchRecommended" v-if="Recommended && searchResult.length" v-animate="'pulse'">
          <ul>
            <li class="flex items-center searchRecommendedList" v-for="(item, index) in searchResult"
              @click="search(item)" :class="index == sIndex ? 'keySelect' : ''">
              <img src="@/assets/svg/search.svg" class="w-4 h-4" />
              <p class="truncate ml-2 text-sm text-gray-600">{{ item }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import baidu from "@/assets/svg/baidu.svg";
import s360 from "@/assets/svg/360.svg";
import sougou from "@/assets/svg/sougou.svg";
import Google from "@/assets/svg/google.svg";
import Bing from "@/assets/svg/bing.svg";
import baidudev from "@/assets/img/baidudev.png"
import { animate } from "@/util/plugins"
import $ from "jquery"
import { useStore } from "vuex";
import { ref, getCurrentScope, nextTick, onUnmounted } from "vue";
import cache from "../../util/cache";
import { searchGo } from "../../util/href";
import ajax from "../../util/ajax";
var changeStatus = false
const store = useStore();
const list = ref([
  {
    name: '百度',
    icon: baidu,
    url: 'https://www.baidu.com/s?wd=',
  },
  {
    name: 'Google',
    icon: Google,
    url: 'https://www.google.com/search?q=',
  },
  {
    name: 'Bing',
    icon: Bing,
    url: 'https://www.bing.com/search?q=',
  },
  {
    name: '搜狗',
    icon: sougou,
    url: 'https://www.sogou.com/web?query=',
  },
  {
    name: '360',
    icon: s360,
    url: 'https://www.so.com/s?q=',
  },
  {
    name: '开发者搜索',
    icon: baidudev,
    url: 'https://kaifa.baidu.com/searchPage?module=SEARCH&wd=',
  },
]);

const defSearch = ref(cache.get("defSearch", list.value[0]))
cache.set("defSearch", list.value[0])
const sIndex = ref(0)
const openSearch = ref(false)
const searchTypeDom = ref()
const searchText = ref("")
const close = () => {
  if (openSearch.value) {
    animate({ target: searchTypeDom.value }, 'flipOutX')
    setTimeout(() => {
      openSearch.value = false
    }, 1000)
  }
}
function debounce(time, hanlder) {
  var times = 0;
  return function () {
    var nowTime = new Date().getTime();
    if (nowTime - times >= time) {
      hanlder();
      times = nowTime;
    }
  }
}
const getInfo = () => {
  $.ajax({
    url: 'https://www.baidu.com/sugrec?prod=pc&wd=' + searchText.value,
    dataType: 'jsonp',
    success: (data) => {
      if (data['g']) {
        let list = data.g;
        let t = []
        list.forEach(el => {
          t.push(el.q)
        })
        searchResult.value = t;
      } else {
        searchResult.value = [];
      }
    }
  })
}
const getResult = () => {
  getInfo()
}
const swipeSearch = (item) => {
  defSearch.value = item
  cache.set("defSearch", item)
  close();
}
const searchSatrt = (event) => {
  nextTick(() => {
    if (changeStatus) {
      let text = searchText.value
      searchGo(text)
    }
  })
}
const focus = () => {
  close();
  Recommended.value = true;
}
const clear = () => {
  searchText.value = "";
}
const search = (item) => {
  searchText.value = item;
  searchGo(item)
}
const Recommended = ref(false);
const closeRecommended = (event) => {
  setTimeout(_ => {
    Recommended.value = false;
  }, 100)
  event.preventDefault()
  event.stopPropagation()
}
const openSearchType = () => {
  if (openSearch.value) {
    close()
  } else {
    openSearch.value = true
  }
}
const swipe = (event) => {
  if (event.code == 'Tab') {
    let index = list.value.findIndex(el => el.name == defSearch.value.name);
    if (index < list.value.length - 1) {
      index += 1
    } else {
      index = 0
    }
    swipeSearch(list.value[index])
    event.preventDefault()
    event.stopPropagation()
  }
  if (event.code == "Enter") {
    changeStatus = true
    setTimeout(() => {
      changeStatus = false
    }, 100)
  }
  if (event.code == 'ArrowDown') {
    if (sIndex.value == searchResult.value.length - 1) {
      sIndex.value = 0;
    } else {
      sIndex.value += 1;
    }
    if (searchResult.value.length > 0) {
      searchText.value = searchResult.value[sIndex.value]
    }

    event.preventDefault()
    event.stopPropagation()
  }
  if (event.code == 'ArrowUp') {
    if (sIndex.value == 0) {
      sIndex.value = searchResult.value.length - 1
    } else {
      sIndex.value -= 1;
    }
    if (searchResult.value.length > 0) {
      searchText.value = searchResult.value[sIndex.value]
    }
    event.preventDefault()
    event.stopPropagation()
  }

}
const color = "#747474"
const searchResult = ref([])
const clickEvent = (event) => {
  const { id } = event.target
  if (id != 'Searchengine') {
    if (openSearch.value) {
      close();
    }
  }
}
window.addEventListener("click", clickEvent);
onUnmounted(() => {
  window.removeEventListener("click", clickEvent);
})
</script>
<style lang="less">
.keySelect {
  padding-left: 25px !important;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

.searchList {
  position: absolute;
  z-index: 2;
  width: calc(100% - 28px);
  background: transparent;


  >.searchType {

    >div {
      overflow-x: scroll;
      display: flex;
      transition: all .3s;

      &::-webkit-scrollbar {
        display: none;
      }

      >div {
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;

        >img {
          background-color: rgb(255, 255, 255);
          padding: 10px;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: block;
        }

        >span {
          white-space: nowrap;
        }
      }
    }
  }

  >.searchRecommended {
    top: 0px;
    position: absolute !important;
    padding: 15px 0px !important;
    overflow: hidden;

    .searchRecommendedList {
      transition: all .2s;
      padding: 0px 15px;
      height: 30px;

      &:hover {
        padding-left: 25px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.4);
      }
    }
  }

  >.searchRecommended,
  .searchType {
    position: relative;
    width: 100%;
    margin-top: 15px;
    padding: 15px 15px;
    user-select: none;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      border-radius: 25px;
      left: 0;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(40px);
      z-index: -1;
    }
  }

}

.search-box {
  width: 100%;
  position: relative;
  align-items: center;
  padding: 0px 15px;
  transition: all 300ms;
}

.focus-search {
  border-radius: 30px;
  box-shadow: 0 0 10px 3px #0000001a;
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  padding: 0px 15px;
  transition: all 300ms;

  &:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 30px;
    left: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(40px);
    z-index: -1;
  }

  >input {
    height: 100%;
    outline: none;
    border: none;
    width: calc(100% - 50px);
    flex: 1;
    background: transparent;
    color: #333;
  }

  >i {
    margin-left: 10px;
    color: #747474;
    font-size: 20px;
  }
}
</style>